<template lang="">
    <div>
        <!-- <el-table :data="tableData" style="width: 100%" ref="table" @selection-change="select"> -->
        <el-table :data="tableData" style="width: 100%" ref="table">
            <el-table-column prop="adminId" label="管理员ID">
            </el-table-column>
            <el-table-column prop="adminName" label="管理员姓名">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
                <template slot-scope="scope">
                    <!-- <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">查看  <--能传两个参数 -->
                    <el-button size="mini" type="primary" @click="handleEdit(scope.row.adminId)">修改密码
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.adminId)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <EditPassword></EditPassword>
    </div>
</template>
<script>
    import EditPassword from './EditPassword.vue';
    export default {
        name: 'ManageTable',
        components:{
            EditPassword
        },
        data() {
            return {
                tableData: [
                    {
                        id: 1,
                        adminId: "123",
                        adminName: '张三'
                    },
                ],
                index: 1,
                page: 1,
            }
        },
        methods: {
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            emitServer() {
                axios({
                    method: 'GET',
                    url: '/qssAdmin/queryQssAdmin',
                    params:{
                        pageNo:1,
                        pageSize:20
                    },
                    withCredentials: true,
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    console.log('拉取管理员列表成功', result.data);
                    this.tableData = result.data.data
                    this.$bus.$emit('totalPage', result.data.data.total)  //告知页码组件全部有多少条数
                }).catch((err) => {
                    this.$message('拉取管理员列表失败' + err.message)
                });
            },
            handleEdit(id) {
                console.log(id);
                this.$bus.$emit('editPassword',id)
            },
            handleDelete(id) {
                console.log('删除id', id);
                axios({
                    method: 'DELETE',
                    url: `/qssAdmin/deleteQssAdmin/${id}`,
                    withCredentials: true,
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    this.$message({
                        message: `已删除ID为:${id}的管理员`,
                        type: 'success'
                    });
                    this.emitServer()
                }).catch((err) => {
                    this.$message({
                        message: '删除失败' + err.message,
                        type: 'info'
                    });
                });
            },
            /* select(selection){
                console.log(this.select);
                this.$bus.$emit('select')
            } */
        },
        mounted() {
            this.$bus.$on('pageChange', (val) => {
                this.emitServer()
            })
            this.$bus.$on('clearSearch', () => {
                this.emitServer()
            })
            this.$bus.$on('search', (obj) => {
                console.log('搜索', obj);
                this.tableData = obj
            })
            this.emitServer()
        },
        beforeDestroy() {
            this.$bus.$off('pageChange')
            this.$bus.$off('clearSearch')
            this.$bus.$off('search')
        },
    }
</script>
<style lang="">

</style>